﻿@page "/demo"
@page "/demos"
@inherits AppComponentBase

<PageOutlet Url="demos"
            Title="Demos"
            Description="Open source, Ultra fast, High quality, Cross platform web, desktop and mobile apps developed by C# .NET">
    <link rel="prerender" href="https://todo.bitplatform.dev/" />
    <link rel="prerender" href="https://sales.bitplatform.dev/" />
    <link rel="prerender" href="https://blazorui.bitplatform.dev/" />
    <link rel="prerender" href="https://adminpanel.bitplatform.dev/" />
</PageOutlet>

<div class="page-container">
    <section class="page-section">
        <div class="page-section-content">
            <BitText Typography="BitTypography.H1" Align="BitTextAlign.Center" Gutter>Products Demo</BitText>
            <BitText Typography="BitTypography.H4" Align="BitTextAlign.Center">
                It's not just another UI toolkit library!
            </BitText>
            <BitText Typography="BitTypography.Subtitle1" Align="BitTextAlign.Start">
                A complete E2E solution from one of the best technology partners available.
            </BitText>
        </div>
    </section>

    <section class="page-section mid-section page-section-content">
        <BitStack Alignment="BitAlignment.Center">
            <BitStack Horizontal Wrap Alignment="BitAlignment.Center" Style="max-width:1000px">
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground"><b>Open source</b>❤️</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Full stack</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Cross platform</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Background Jobs</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Windows App</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Super-optimized</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Caching</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">2FA</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Social sign-in</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Magic link</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Web OTP</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">reCAPTCHA</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Dark/Light theme</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Localization</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Globalization</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">SEO friendly</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Offline support</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Web Push</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">PWA</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">AI Chatbot</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Rewarded Ads</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Payment Gateway</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Telemetry</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Logging</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Realtime dashboard</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">Feature management</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">AdminPanel</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground">In-app updates</BitTag>
                <BitTag Size="BitSize.Large" Color="BitColor.SecondaryForeground"><b>Free</b></BitTag>
            </BitStack>
        </BitStack>
    </section>

    <section class="page-section">
        <div class="page-content page-section-content">
            <BitText Typography="BitTypography.H6" Align="BitTextAlign.Center">
                From active shovels in Canadian mines to logistics drivers in Sweden, over 450K students in India,
                platform to maintain 3D information of 4M house units, these are just a few of the groundbreaking software
                projects built on the bitplatform!
            </BitText>
        </div>
    </section>

    <div class="page-content">
        <BitText id="boilerplate" Style="scroll-margin-top:100px" Typography="BitTypography.H3">
            Boilerplate
        </BitText>
        <div class="section-title-line boilerplate"></div>
        <br />
        <BitText Typography="BitTypography.H6">
            The bit Boilerplate is a feature-packed project template that accelerates your development.
        </BitText>

        <br /><br />

        <div class="video-container">
            <iframe width="800" height="450"
                    allowfullscreen frameborder="0"
                    title="Bit Boilerplate features overview"
                    src="https://www.youtube.com/embed/-3viBEtJHLo"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
            @* <div class="video-wrapper">
                <video controls
                       title="bitplatform intro"
                       src="https://videos.bitplatform.dev/bitplatform-intro.mp4" />
                </div> *@
        </div>

        <br /><br /><br /><br />

        <BitText Typography="BitTypography.H6" Color="BitColor.SecondaryForeground" Gutter>
            The source code is yours to explore and modify! Deploy it on your own server or any cloud platform you choose.
            <br />
            Check out the following fully functional demo apps to see the Boilerplate in action across various platforms.
            <br />
            (use <BitTag Size="BitSize.Small" Color="BitColor.Tertiary" Variant="BitVariant.Outline">test@bitplatform.dev</BitTag> as the email and <BitTag Size="BitSize.Small" Color="BitColor.Tertiary" Variant="BitVariant.Outline">123456</BitTag> as the password to log in)
        </BitText>

        <br /><br /><br /><br />

        <BitText id="adminpanel" Style="scroll-margin-top:100px" Typography="BitTypography.H4" Gutter>AdminPanel</BitText>
        <BitText>
            Need a robust back-office or admin panel?
            <br />
            bit Boilerplate's AdminPanel module has you covered with built-in features, ready to go from day one.
        </BitText>
        <br />
        <div class="page-flex-container">
            <div class="page-content-container">
                <img class="template-img dark-image" src="/images/demos/admin-dark.webp" alt="AdminPanel sample" />
                <img class="template-img light-image" src="/images/demos/admin-light.webp" alt="AdminPanel sample" />
            </div>

            <div class="page-content-container">
                <a class="primary-btn" href="@Urls.AdminPanelPwa" target="_blank" title="PWA">PWA</a>
                <a class="secondary-btn" href="@Urls.AdminPanelGooglePlay" target="_blank" title="Google Play"><span class="btn-img google-play"></span>Android</a>
                <a class="secondary-btn" href="@Urls.AdminPanelAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>iOS - macOS</a>
                <a class="secondary-btn" href="@Urls.AdminPanelWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
                <a class="secondary-btn" href="@Urls.AdminPanelPlayground" target="_blank" title="GitHub codespace"><span class="btn-img github"></span>Playground</a>
            </div>
        </div>

        <BitText id="sales" Style="scroll-margin-top:100px" Typography="BitTypography.H4" Gutter>Sales (still shaping up)</BitText>
        <BitText>
            See the speed of a website built with our Boilerplate.
        </BitText>
        <br />
        <div class="page-flex-container">
            <div class="page-content-container">
                <img class="template-img dark-image" src="/images/demos/sales-dark.webp" alt="Sales sample" />
                <img class="template-img light-image" src="/images/demos/sales-light.webp" alt="Sales sample" />
            </div>

            <div class="page-content-container">
                <a class="primary-btn" href="@Urls.SalesPwa" target="_blank" title="PWA">PWA</a>
                <a class="secondary-btn disabled" title="Google Play (Coming soon)"><span class="btn-img google-play"></span>Android</a>
                <a class="secondary-btn disabled" title="Apple Store (Coming soon)"><span class="btn-img apple-store"></span>iOS - macOS</a>
                <a class="secondary-btn" href="@Urls.SalesWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
            </div>
        </div>

        <BitText id="todo" Style="scroll-margin-top:100px" Typography="BitTypography.H4" Gutter>Todo</BitText>
        <BitText Gutter>
            Experience the rapid performance of our sample app on mobile, desktop, and web, all built with our Boilerplate.
        </BitText>
        <br />
        <div class="page-flex-container">
            <div class="page-content-container">
                <img class="template-img dark-image" src="/images/demos/todo-dark.webp" alt="Todo sample" />
                <img class="template-img light-image" src="/images/demos/todo-light.webp" alt="Todo sample" />
            </div>

            <div class="page-content-container">
                <a class="primary-btn" href="@Urls.TodoTemplatePwa" target="_blank" title="PWA">PWA</a>
                <a class="secondary-btn" href="@Urls.TodoOfflineWebApp" target="_blank" title="SQLite db inside browser">SQLite db inside browser</a>
                <a class="secondary-btn" href="@Urls.TodoTemplateGooglePlay" target="_blank" title="Google Play"><i class="btn-img google-play" />Android</a>
                <a class="secondary-btn" href="@Urls.TodoTemplateAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>iOS - macOS</a>
                <a class="secondary-btn" href="@Urls.TodoTemplateWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
            </div>
        </div>

        <BitText id="platform" Style="scroll-margin-top:100px" Typography="BitTypography.H3">
            Platform website
        </BitText>
        <div class="section-title-line platform"></div>
        <br />
        <BitText Style="max-width:920px" Typography="BitTypography.H6">
            Experience the blazing speed of bitplatform.dev.
            <br />
            This site was built using our own product, showcasing the exceptional performance you can achieve for your projects.
        </BitText>
        <br />
        <div class="page-flex-container">
            <div class="page-content-container">
                <img class="template-img dark-image" src="/images/demos/platform-dark.webp" alt="bitplatform website" />
                <img class="template-img light-image" src="/images/demos/platform-light.webp" alt="bitplatform website" />
            </div>

            <div class="page-content-container">
                <a class="primary-btn" href="@Urls.PlatformPwa" target="_blank" title="PWA">PWA</a>
                <a class="secondary-btn" href="@Urls.PlatformPageSpeed" target="_blank" title="PageSpeed Insights">PageSpeed Insights</a>
            </div>
        </div>

        <BitText id="blazorui" Style="scroll-margin-top:100px" Typography="BitTypography.H3">
            BlazorUI
        </BitText>
        <div class="section-title-line blazorui"></div>
        <br />
        <BitText Style="max-width:920px" Typography="BitTypography.H6">
            A lightweight yet powerful component library for C# developers.
            <br />
            It’s ideal for building consumer-facing apps and websites that are fast, responsive, and optimized for both desktop and mobile.
        </BitText>
        <br />
        <div class="page-flex-container">
            <div class="page-content-container">
                <img class="template-img dark-image" src="/images/demos/blazorui-dark.webp" alt="BlazorUI sample" />
                <img class="template-img light-image" src="/images/demos/blazorui-light.webp" alt="BlazorUI sample" />
            </div>

            <div class="page-content-container">
                <a class="primary-btn" href="@Urls.BlazorUiPwa" target="_blank" title="PWA">PWA</a>
                <a class="secondary-btn" href="@Urls.BlazorUiGooglePlay" target="_blank" title="Google Play"><span class="btn-img google-play"></span>Android</a>
                <a class="secondary-btn" href="@Urls.BlazorUiAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>iOS - macOS</a>
                <a class="secondary-btn" href="@Urls.BlazorUiWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
                <a class="secondary-btn" href="@Urls.BlazorUiPlayground" target="_blank" title="GitHub codespace"><span class="btn-img github"></span>Playground</a>
                <a class="secondary-btn" href="@Urls.BlazorUiBenchmarks" target="_blank" title="Benchmark repo"><span class="btn-img github"></span>Benchmarks</a>
            </div>
        </div>
    </div>

    <section class="page-section mid-section">
        <div class="products-container">
            <span>All hosted on a single cheap server:</span>
            <span><b class="highlight-1">1 core CPU</b> and <b class="highlight-1">1.5 GB RAM</b></span>
        </div>
    </section>

    <div class="page-content">

        <BitText Typography="BitTypography.H2" Align="BitTextAlign.Center" Style="margin-top:10rem">
            Our customers
        </BitText>

        <br />

        <CustomerCarousel />
    </div>
    <br />
    <br />
    <br />
    <br />
</div>